<template>
  <div>
    cart
    {{ list }}
    <v-touch v-on:swipeleft="onSwipeLeft" @swiperight="onSwiperRight">
      <div ref="swiper" class="cart-item">Swipe me!</div>
    </v-touch>
  </div>
</template>

<script>
// 如何在组件中，获取vuex中state的值？
// 答案：需要借助组件中的计算属性
export default {
  computed: {
    list() {
      // 在组件中获取vuex中的值
      return this.$store.state.list
    },
  },
  methods: {
    onSwipeLeft() {
      this.$refs.swiper.style.transform = 'translate(-100px, 0)'
      console.log(this.$refs.swiper.style.transform)
      console.log('left')
    },
    onSwiperRight() {
      this.$refs.swiper.style.transform = 'translate(0, 0)'
    },
  },
}
</script>

<style lang="scss" scoped>
.cart-item {
  height: 2rem;
  background: lightblue;
  transition: transform 0.5s;
}
</style>
